<template>
  <u-popup :show="drawer" mode="right" @close="close" @open="open" width="100%" class="word-detail-drawer">
    <div class="word-detail-container">
      <!-- 单词头部信息 -->
      <div class="word-header">
        <i class="fa-solid fa-arrow-left" @click="handleClose"></i>
        <h2 class="word-title">{{ currentWord.fullSpell || currentWord.wordFullSpell || '单词' }}</h2>
        <i class="fa-solid fa-volume-up" @click="playWordPronunciation" :title="isAmerican ? '播放美式发音' : '播放英式发音'"></i>
        <el-button
            class="pronunciation-switch"
            @click="isAmerican = !isAmerican"
        >
          {{ isAmerican ? 'US' : 'UK' }}
        </el-button>
      </div>

      <!-- 音标与词性 -->
      <div class="word-phonetic">
        <span class="phonetic-text">{{ isAmerican ? currentWord.phoneticAm : currentWord.phoneticBr }}</span>
        <span class="part-of-speech">{{ currentWord.partOfSpeech || '词性' }}</span>
        <span class="word-meaning">{{ currentWord.wordMeaning || '释义' }}</span>
      </div>

      <!-- 常用短语 -->
      <div v-if="currentWord.phrases && currentWord.phrases.length" class="section">
        <h3 class="section-title">常用短语</h3>
        <div class="phrases-list">
          <div
              v-for="(phrase, index) in currentWord.phrases"
              :key="index"
              class="phrase-item"
          >
            <div class="phrase-content">
              <span class="phrase-text">{{ phrase.text }}</span>
              <i class="fa-solid fa-volume-up" @click="playPhrasePronunciation(phrase.text)"></i>
            </div>
            <span class="phrase-meaning">{{ phrase.meaning }}</span>
          </div>
        </div>
      </div>

      <!-- 例句 -->
      <div v-if="currentWord.examples && currentWord.examples.length" class="section">
        <h3 class="section-title">例句</h3>
        <div
            v-for="(example, index) in currentWord.examples"
            :key="index"
            class="example-item"
        >
          <div class="example-content">
            <span class="example-text">{{ example.sentence }}</span>
            <i class="fa-solid fa-volume-up" @click="playExamplePronunciation(example.sentence)"></i>
          </div>
          <span class="example-meaning">{{ example.translation }}</span>
        </div>
      </div>
    </div>
  </u-popup>
</template>

<script>
import AudioCacheUtil from '@/utils/AudioCacheUtil'

export default {
  name: 'WordDetailDrawer',
  props: {
    word: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      drawer: this.visible,
      isAmerican: true, // 美式发音
      playbackSpeed: 1.0, // 播放速度
      currentWord: this.transformedWord
    }
  },
  computed: {
    transformedWord() {
      return this.transformWordFormat(this.word)
    }
  },
  watch: {
    visible(val) {
      this.drawer = val
    },
    word(newVal) {
      this.currentWord = newVal.fullSpell ? this.transformedWord : this.currentWord
    }
  },
  methods: {
    handleClose() {
      this.drawer = false
      this.$emit('update:visible', false)
    },
    playWordPronunciation() {
      const wordText = this.currentWord.fullSpell || this.currentWord.wordFullSpell
      AudioCacheUtil.play(wordText, this.isAmerican ? 'en' : 'uk', this.playbackSpeed)
    },
    playPhrasePronunciation(phraseText) {
      AudioCacheUtil.play(phraseText, this.isAmerican ? 'en' : 'uk', this.playbackSpeed)
    },
    playExamplePronunciation(sentence) {
      AudioCacheUtil.play(sentence, this.isAmerican ? 'en' : 'uk', this.playbackSpeed)
    },
    transformWordFormat(originalWord) {
      if (originalWord && originalWord.extendedInfo) {
        try {
          originalWord = JSON.parse(originalWord.extendedInfo)
        } catch (e) {
          console.error('解析单词信息失败', e)
          return {}
        }
      }
      if (!originalWord || !originalWord.word) return {}

      return {
        fullSpell: originalWord.word,
        wordFullSpell: originalWord.word,
        phoneticAm: originalWord.phonetics?.us || '',
        phoneticBr: originalWord.phonetics?.uk || '',
        partOfSpeech: originalWord.partOfSpeech || '',
        wordMeaning: originalWord.meaningOptions?.correct || '',
        phrases: originalWord.phrases?.map(phrase => ({
          text: phrase.p,
          meaning: phrase['zh-mean']
        })) || [],
        examples: originalWord.examples?.map(example => ({
          sentence: example.e,
          translation: example['zh-mean']
        })) || [],
        confusions: originalWord.confusions || [],
        meaningOptions: originalWord.meaningOptions || {}
      }
    }
  }
}
</script>

<style scoped>
/* 白天主题核心配色 */
.word-detail-drawer {
  background-color: #ffffff; /* 纯白色背景 */
  color: #333333; /* 深色文字 */
}

.word-detail-container {
  padding: 24px;
  max-height: 100vh;
  overflow-y: auto;
  line-height: 1.7;
}

/* 单词头部样式 */
.word-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeeeee; /* 浅灰色边框 */
}

.back-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background-color: #f5f5f5 !important;
  color: #666666 !important;
  border: none !important;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background-color: #eeeeee !important;
  transform: scale(1.05);
}

.word-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  flex-grow: 1;
  min-width: 0;
  color: #1a1a1a; /* 更深的单词颜色 */
}

.pronounce-btn {
  background-color: #e6f7ff !important; /* 浅蓝色背景 */
  color: #1890ff !important; /* 蓝色图标 */
  border: 1px solid #91d5ff !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.pronounce-btn:hover {
  background-color: #bae7ff !important;
  transform: scale(1.05);
}

.pronunciation-switch {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border: 1px solid #dddddd !important;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.pronunciation-switch:hover {
  background-color: #eeeeee !important;
}

/* 音标与词性样式 */
.word-phonetic {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  align-items: center;
}

.phonetic-text {
  color: #666666; /* 深灰色音标 */
  font-style: italic;
  font-size: 16px;
}

.part-of-speech {
  background-color: #f0f7ff;
  color: #1890ff;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 14px;
}

.word-meaning {
  color: #333333; /* 深色释义 */
  font-size: 16px;
  max-width: 80%;
}

/* 板块通用样式 - 只保留颜色变化动画，移除浮动 */
.section {
  margin-bottom: 32px;
  padding: 16px;
  background-color: #f9f9f9; /* 浅灰色板块背景 */
  border-radius: 12px;
  transition: background-color 0.3s ease; /* 仅颜色变化动画 */
}

/* 板块悬停时仅变色 */
.section:hover {
  background-color: #f0f0f0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eeeeee;
  color: #1890ff; /* 蓝色标题 */
  display: flex;
  align-items: center;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: #1890ff;
  border-radius: 2px;
  margin-right: 8px;
}

.phrases-list, .examples-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 短语条目样式 - 添加浮动动画 */
.phrase-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background-color: #ffffff;
  border-radius: 8px;
  border-left: 3px solid #1890ff; /* 蓝色左侧边 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 条目添加浮动相关动画 */
}

/* 短语条目悬停时浮动效果 */
.phrase-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
  background-color: #00b578;
}

.phrase-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phrase-text {
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a; /* 深色短语 */
  flex-grow: 1;
}

.phrase-meaning {
  color: #666666; /* 灰色释义 */
  font-size: 14px;
  padding-left: 2px;
}

.phrase-item:hover .phrase-text,
.phrase-item:hover .phrase-meaning {
  color: #ffffff !important;
}

/* 例句条目样式 - 添加浮动动画 */
.example-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  border-left: 3px solid #722ed1; /* 紫色左侧边 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 条目添加浮动相关动画 */
}

/* 例句条目悬停时浮动效果 */
.example-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(114, 46, 209, 0.1);
  background-color: #00b578;
}

.example-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.example-text {
  font-weight: 500;
  color: #1a1a1a; /* 深色例句 */
  flex-grow: 1;
}

.example-meaning {
  color: #666666; /* 灰色翻译 */
  font-size: 14px;
  padding-left: 2px;
}

.example-item:hover .example-text,
.example-item:hover .example-meaning {
  color: #ffffff !important;
}

/* 发音按钮通用样式 */
.phrase-pronounce-btn, .example-pronounce-btn {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  border: 1px solid #91d5ff !important;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.phrase-pronounce-btn:hover, .example-pronounce-btn:hover {
  background-color: #bae7ff !important;
  transform: scale(1.05);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .word-detail-container {
    padding: 16px;
  }

  .word-title {
    font-size: 26px;
  }

  .word-header {
    gap: 12px;
    margin-bottom: 16px;
  }

  .back-btn, .pronounce-btn {
    width: 36px;
    height: 36px;
  }

  .section {
    padding: 12px;
    margin-bottom: 24px;
  }

  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .word-meaning {
    max-width: 100%;
    font-size: 15px;
  }

  .phrase-item, .example-item {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .word-title {
    font-size: 22px;
  }

  .phonetic-text, .word-meaning {
    font-size: 14px;
  }

  .phrase-meaning, .example-meaning {
    font-size: 13px;
  }
}
</style>
